<template>
  <div class="index-box">
      <div class="title">
          <span>物业管理费明细</span>
      </div>
      <div class="box-message">
          <table class="table-box">
              <tr>
                  <td class="tite-td">小区名称</td>
                  <td class="tite-td">物业管理公司名称</td>
                  <td class="tite-td">业主总人数</td>
                  <td class="tite-td">物业管理费</td>
              </tr>
              <tr>
                  <td>{{headdata.companyName}}</td>
                  <td>{{headdata.compoundName}}</td>
                  <td>{{headdata.userNum}}</td>
                  <td>{{headdata.propertyManagementFee}}</td>
              </tr>
              <tr>
                  <td class="tite-td">水电费</td>
                  <td class="tite-td">总兑换费</td>
                  <td class="tite-td">审核状态</td>
              </tr>
              <tr>
                  <td>{{headdata.waterElectricityFee}}</td>
                  <td>{{headdata.costTotal}}</td>
                  <td v-if="headdata.applicationPropertyStatus == 1">审核通过</td>
                  <td v-if="headdata.applicationPropertyStatus == 2">审核不通过</td>
                  <td v-if="headdata.applicationPropertyStatus == 3">审核中</td>
              </tr>
          </table>
      </div>
      <div class="index-list-box">  
        <template>
                <el-table :data="merchandiseList"
                        border
                        show-summary
                        :summary-method="getSummaries"
                        style="width: 100%">
                <el-table-column type="index"
                                label="序号"
                                align="center">
                </el-table-column>
                <el-table-column prop="user_name"
                                label="业主名字"
                                 align="center"> 
                </el-table-column>
                <el-table-column prop="mobile_plone"
                                label="手机号"
                                align="center">
                </el-table-column>
                <el-table-column prop="user_site"
                                label="业主楼房号"
                                 align="center">
                </el-table-column>
                <el-table-column prop="plumber_fee"
                                label="物业管理费"
                                 align="center">
                </el-table-column>
                <el-table-column prop="tenement_fee"
                                label="水电费"
                                 align="center">
                </el-table-column>
                <el-table-column prop='xlj_points'
                                label="总扣费"
                                 align="center">
                </el-table-column>
                <el-table-column prop='add_time'
                                label="兑换日期"
                                 align="center">
                </el-table-column>
                <el-table-column prop='xlj_is_bool'
                                label="确认状态"
                                 align="center">
                                 <template slot-scope="scope">
                                  <span v-if="scope.row.xlj_is_bool == 0">待审</span>
                                  <span v-if="scope.row.xlj_is_bool == 1">通过</span>
                                  <span v-if="scope.row.xlj_is_bool == 2">不通过</span>
                                </template>
                </el-table-column>
                <el-table-column fixed="right"
                                label="操作"
                                 align="center">
                    <template slot-scope="scope">
                        <el-button size="mini"
                                    @click="getreviewPropertyUserBuildingXlj(scope.$index, scope.row)" v-if="scope.row.xlj_is_bool == 0">确认</el-button>
                    </template>
                </el-table-column>
                </el-table>
            </template>
      </div>
      <!-- 分页器 -->
      <div class="current">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="10"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getviewUserBuildingDetailById, getreviewPropertyUserBuildingXlj} from "@/api/PropertyManagement";
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
        merchandiseList:[],
        supplierid:'',
        value: '',
        value2: '',
        value3: '',
        headdata:{},
        total: 0, // 用户总条数
        pagesize: 10, //每页显示多少条，默认为10条
        pageNo: 1, // 当前页码，默认为第一页
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
      this.headdata = this.$route.query.row
      this.getviewUserBuildingDetailById()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
      getviewUserBuildingDetailById(){
          let data = {
              buildingId:this.headdata.buildingId.toString(),
              status:1,
              pageNo: this.pageNo,
              pagesize: this.pagesize,
          }
          getviewUserBuildingDetailById(data).then(res => {
              console.log(res)
              this.merchandiseList = res.rows
              this.pageNo = res.pageNo
              this.pagesize = res.pageSize
              this.total = res.total
          })
      },
    //   确认
    getreviewPropertyUserBuildingXlj(index,row){
        let idlist = []
        idlist.push(row.id)
        console.log(this.headdata)
        let data = {
             id:row.id,
             status:1,
             roleType:1
        }
        getreviewPropertyUserBuildingXlj(data).then(res => {
            if(res.code == 20000){
               this.getviewUserBuildingDetailById()
            }
        })
    },
    // 合计列
    getSummaries(param) {
      let { columns, data } = param
      let sums = []
      var allplumbermoney = 0
      var alltenementmoney = 0
      var allxljpointsmoney = 0
      data.map(item => {
        allplumbermoney += Number(item.plumber_fee)
        alltenementmoney += Number(item.tenement_fee)
        allxljpointsmoney += Number(item.xlj_points)
        return { allplumbermoney, alltenementmoney, allxljpointsmoney }
      })
      columns.forEach((column, index) => {
        sums[3] = '合计'
        sums[4] = allplumbermoney
        sums[5] = alltenementmoney
        sums[6] = allxljpointsmoney
      })

      return sums
    },
    handleSizeChange(val) {
        this.pagesize = val;
        this.queryPropertyUserList();
      },
      handleCurrentChange(val) {
        this.pageNo = val;
        this.queryPropertyUserList();
      },
  } 
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.index-box{
    width: 100%;
    .title{
        width: 100%;
        padding:20px 40px 20px 40px;
        box-sizing: border-box;
        span{
            font-size: 20px;
            font-weight: bold;
        }
    }
    .index-middlebox{
        width: 100%;
        padding:0px 40px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        .left{
            font-size: 15px;
            font-weight: bold;
        }
    }
    .box-message{
        width: 100%;
        padding: 0 40px;
        box-sizing: border-box;
        .table-box{
            width: 100%;
            border: 1px solid #EBEEF5;
            border-collapse:collapse;
            .tite-td{
                font-size: 16px;
                font-weight: bold;
                color: #909399;
            }
            td{
                width: 200px;
                height: 40px;
                text-align: center;
                border-bottom: 1px solid #EBEEF5;
                border-right: 1px solid #EBEEF5;
            }
        }
    }
    .index-list-box{
        width: 100%;
        padding: 30px 40px;
        box-sizing: border-box;
    }
    .current {
      .block {
        text-align: center;
      }
    }
}
</style>
